<template>
  <div class="sys-msg">
    <NavBar title="通知"></NavBar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.message"
        center
        title-class="msg"
        @click="$router.push(`/users/${item.sender.id}`)"
      >
        <template #icon>
          <van-image
            round
            width="30px"
            height="30px"
            :src="item.sender.decorate_avatar"
          />
        </template>
        <template #extra>
          <span class="value">{{ item.create_time | dateFormat }}</span>
          <span class="mydot" v-if="!item.read"><van-icon dot /></span>
        </template>
        <template #title>
          <span>{{ item.message }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import NavBar from "@/components/Home/NavBar";
import { SysMessageAPI } from "@/api/userApi";
import { mapState } from "vuex";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {
    ...mapState("chat", ["newMsg"]),
  },
  newMsg() {
    if (!this.newMsg.is_system) {
      return;
    }
    this.list.push(this.newMsg);
  },
  methods: {
    async onLoad() {
      const { data: res } = await SysMessageAPI(this.page);
      this.list = [...this.list, ...res.results];
      // 加载状态结束
      this.loading = false;
      this.page++;
      // 数据全部加载完成
      if (!res.next) {
        this.finished = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.value {
  font-size: 12px;
  color: #999999;
}
.msg {
  font-size: 14px;
  color: #191919;
  margin: 0px 10px;
}
.mydot {
  position: relative;
  left: 7px;
  top: -6px;
}
</style>